<template >
  <div class="top-nav" :class="[navMenuState ? 'navMenuState' : '']">
    <div class="nav-left">
      <div class="navOpen">
        <Navopen></Navopen>
      </div>
      <el-badge
        v-if="limits.indexOf('im_session_queue_indicator') > -1"
        :value="webchatUndealNumber"
        class="item"
        :max="99"
        :hidden="!webchatUndealNumber"
      >
        <span class="V7_iconfont V7_iconV7tubiao_paidui"></span>
      </el-badge>
      <businessStatus></businessStatus>
      <WebchatStatus
        :limits="limits"
        v-if="!isAdmin && limits.indexOf('im_change') > -1"
      ></WebchatStatus>
      <PhoneBar v-show="limits.indexOf('call_toolbar') > -1"></PhoneBar>
    </div>
    <RightToolbar></RightToolbar>
    <UserInfo></UserInfo>
  </div>
</template>
<script lang="ts">
import Navopen from './NavOpen.vue'
import PhoneBar from './PhoneBar.vue'
import RightToolbar from './RightToolbar.vue'
import UserInfo from './UserInfo.vue'
import businessStatus from './businessStatus.vue'
import WebchatStatus from '@/views/webchat/webchatStatus.vue'
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'PhoneIndex',
  components: { Navopen, PhoneBar, RightToolbar, UserInfo, WebchatStatus, businessStatus }
})
export default class PhoneBarCom extends Vue {
  private $store: any
  private limits = []
  private isAdmin = false
  get navMenuState () {
    return this.$store.state.common.navMenuState || false
  }

  get webchatUndealNumber () {
    return this.$store.state.webchat.webchatUnDealNum || 0
  }

  private mounted () {
    const user = this.$store.state.common.session.user || {}
    this.limits = user.limits ? user.limits : []
    if (user.type === 1 || user.type === 2) { // 1 是超级管理员 2是计费跳转
      this.isAdmin = true
    }
  }
}
</script>
<style scoped lang="stylus">
.top-nav
  width calc(100% - 68px)
  height 55px
  background $bgc-gray
  /*box-shadow 0px 3px 4px 0px rgba(220, 232, 241, 0.7), 3px 0px 4px 0px rgba(220, 232, 241, 0.7), 0px -3px 4px 0px rgba(220, 232, 241, 0.7);*/
  z-index 20
  display flex
  flex-direction row
  justify-content space-between
  align-items center
  position absolute
  top 0
  left 68px
  .nav-left
    display flex
    align-items center
.top-nav.navMenuState
  width calc(100% - 120px)
  position absolute
  top 0
  left 120px
.V7_iconfont
  color #3d4e66
  font-size 18px
  margin-left 10px
</style>
